<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import * as math from '../../src/og/math.js';
        import { Globe } from '../../src/og/Globe.js';
        import { LonLat } from '../../src/og/LonLat.js';
        import { Vec3 } from '../../src/og/math/Vec3.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { Vector } from '../../src/og/layer/Vector.js';
        import { Ellipsoid } from '../../src/og/ellipsoid/Ellipsoid.js';

        var osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        var globe = new Globe({
            "target": "globus",
            "name": "Earth",
            "layers": [osm]
        });


        let path = [];

        let ell = globe.planet.ellipsoid;

        function getLeaf(startPoi, endPoi, maxHeight = 8000000, n = 70) {
            let path = [];
            for (let i = 0; i <= n; i++) {
                let p0 = Ellipsoid.getIntermediatePointOnGreatCircle(startPoi, endPoi, i / n);
                let height = Math.sin(i / n * Math.PI) * maxHeight;
                let p1 = new LonLat(p0.lon, p0.lat, height);
                let pBottom = ell.lonLatToCartesian(p0),
                    pTop = ell.lonLatToCartesian(p1);
                path.push([pBottom, pTop]);
            }
            return path;
        }


        let rainbow = [
            "rgba(255, 0, 0, 0.7)",
            "rgba(255, 127, 0, 0.7)",
            "rgba(255, 255, 0, 0.7)",
            "rgba(0, 255, 0, 0.7)",
            "rgba(0, 0, 255, 0.7)",
            "rgba(46, 43, 95, 0.7)",
            "rgba(139, 0, 255, 0.7)"
        ];

        let leaves = [];

        let numLeaves = rainbow.length,
            amp = 360 / numLeaves;

        for (let i = 0; i < numLeaves; i++) {
            leaves.push({
                'strip': {
                    'path': getLeaf(new LonLat(i * amp, 0, 0), new LonLat(i * amp + amp, 0, 0)),
                    'color': rainbow[i]
                }
            });
        }

        var collection = new Vector("Collection", {
            'entities': leaves
        });

        globe.planet.addLayer(collection);

    </script>
</body>

</html>